<template>
  <div class="chatpop-wrapper">
    <img
      class="chat-avatar"
      :src="message.type == 'doctor' ? doctorAvatarURL : userAvatarURL"
    />
    <div class="message-wrapper" v-if="message.type == 'doctor'">
      <!-- 文字 -->
      <div class="message-wrapper-inner" v-if="message.contentType == 'text'">
        <div class="message-wrapper-doctor">
          <!-- 加载 -->
          <img
            v-if="loading"
            class="loading-img"
            src="../../assets/image/chat-loading.png"
          />
          <div
            class="message-text-doctor"
            v-else
            :key="spanKey"
            v-html="m"
            @click="handelClick"
          ></div>
        </div>
      </div>
      <!-- 图片 -->
      <div class="message-image" v-if="message.contentType == 'img'">
        <img :src="message.imgUrl" @click="openImagePreview(message.imgUrl)" />
      </div>
      <!-- 报告 -->
      <div class="message-wrapper-inner" v-if="message.contentType == 'report'">
        <div class="message-wrapper-doctor">
          <img
            v-if="loading"
            class="loading-img"
            src="../../assets/image/chat-loading.png"
          />
          <div v-else v-html="m"></div>
          <div
            class="recommend-single recommend-show-report"
            v-if="!loading"
            @click="showReport"
          >
            <img class="report-icon" src="../../assets/image/report-icon.png" />
            舌诊报告
          </div>
        </div>

        <!-- <el-button @click="showReport">查看报告</el-button> -->
      </div>
      <span class="message-stop" v-if="stopCurrentAnswer" @click="stopAnswer"
        >停止生成</span
      >
    </div>
    <div class="message-wrapper" v-else>
      <div class="message-wrapper-oner" v-if="message.contentType == 'text'">
        <span @click="handelClick">{{ msg }}</span>
      </div>
      <div class="message-image" v-if="message.contentType == 'img'">
        <img :src="message.imgUrl" @click="openImagePreview(message.imgUrl)" />
      </div>
      <div class="tongue-img" v-if="message.contentType == 'tongue-img'">
        <div
          class="tongue-single"
          v-for="(img, index) in message.imgUrl"
          :key="index"
        >
          <img :src="img" @click="openImagePreview(img)" />
          <span class="tongue-single-text">{{ imgTitle[index] }}</span>
        </div>
      </div>
    </div>
    <el-image-viewer
      v-if="imagePreviewUrl"
      :url-list="[imagePreviewUrl]"
      z-index="3000"
      :on-close="closeImageViewer"
    />
  </div>
</template>

<script>
  /**单个对话气泡 */
  import { marked } from 'marked'
  import elImageViewer from 'element-ui/packages/image/src/image-viewer.vue'

  const renderer = {
    paragraph(text) {
      return `<p  style="margin-block-start: 0.5em;margin-block-end: 0.5em;margin-inline-start:0.5em">${text}</p>`
    },
    list(body, ordered, num) {
      if (ordered) {
        return `<ol start="${num}" style="margin-block-start: 0.5em;margin-block-end: 0.5em;margin-inline-start:1em">${body}</ol>`
      } else {
        return `<ul style="margin-block-start: 0.5em;margin-block-end: 0.5em;margin-inline-start:1em">${body}</ul>`
      }
    },
    listitem(text) {
      return `<li style="margin-inline-start:1em">${text}</li>`
    },
    link(href, title, text) {
      return `<a href="${href}" title="${title}" target="_blank" style="color:#65b0b4">${text}</a>`
    },
    strong(text) {
      return `<strong>${text.replaceAll(/<\/a>blank/g, '</a>')}</strong>`
    },
  }
  marked.use({ renderer: renderer })

  export default {
    name: 'ChatPop',
    props: {
      message: Object,
      msg: String,
      current: Number,
      total: Number,
      loading: Boolean,
      typing: Boolean,
      stopCurrentAnswer: Boolean,
    },
    components: { elImageViewer },
    data() {
      return {
        doctorAvatarURL: require('../../assets/image/mengyi-icon-Rectangle.png'),
        userAvatarURL: require('../../assets/image/avatar-user-rectangle.png'),
        spanKey: 0,
        imgTitle: ['舌面', '舌底'],
        imagePreviewUrl: '',
      }
    },
    computed: {
      m() {
        let t = this.msg
        t = t.replaceAll(/\n +-/g, '\n-')
        t = t.replaceAll(/<a href/g, '<a style="color:#65b0b4" href')
        t = t.replaceAll(/<\/a>\*\*/g, '</a>blank**')
        // t = t.replaceAll(/\n/g, '<br/>')
        // t = t.replaceAll(/\\+n/g, '<br/>')
        return marked(t)
      },
    },
    watch: {
      message: {
        deep: true,
        handler() {
          // console.log('watch message in pop:>> ')
          // this.$forceUpdate()
        },
      },
      msg(n) {
        // console.log('watch msg in pop :>> ')
        this.$nextTick(() => {
          this.spanKey += 1
        })
      },
    },
    created() {
      console.log('create pop:>> ')
    },
    mounted() {},
    methods: {
      closeImageViewer() {
        this.imagePreviewUrl = ''
      },
      openImagePreview(i) {
        this.imagePreviewUrl = i
      },
      handelClick(e) {
        e.preventDefault()
        console.log('chat pop e :>> ', e)
        if (!e.target.href) return
        let options = { url: e.target.href, title: e.target.innerText }
        this.$emit('previewMedia', options)
      },
      showReport() {
        this.$emit('showReport')
      },
      stopAnswer() {
        if (this.loading) {
          this.$message('正在思考中……')
        } else {
          this.$emit('stopAnswer')
        }
      },
    },
  }
</script>
<style scoped lang="less">
  * {
    box-sizing: border-box;
  }
  .chatpop-wrapper {
    width: 100%;
    display: flex;
    align-items: start;
    margin: 10px 0px;
  }
  .chat-avatar {
    height: 40px;
    width: 40px;
    margin-left: -40px;
  }
  .message-wrapper {
    margin-left: 12px;
    width: 100%;
    display: flex;
    flex-direction: column;
  }
  .message-wrapper-inner {
    display: flex;
    flex-direction: column;
  }
  .message-wrapper-doctor {
    min-height: 56px;
    border-radius: 12px 12px 12px 12px;
    padding: 8px;
    background: #fff;
    width: 100%;
  }
  .message-wrapper-oner {
    padding: 9px 16px;
  }
  .message-text-doctor {
    padding: 0px 8px;
    line-height: 1.5;
  }
  .message-image {
    img {
      height: 300px;
      width: auto;
      border-radius: 12px;
    }
  }
  .recommend-single {
    height: 32px;
    width: 106px;
    background: #ffffff;
    border-radius: 10px 10px 10px 10px;
    border: 1px solid rgba(199, 199, 199, 0.6);
    margin-top: 10px;
    margin-right: 8px;
    padding: 6px 10px;
    cursor: pointer;
    transition: all 0.2s;
  }
  .recommend-single:hover {
    border: 1px solid #65b0b4;
    background: rgba(101, 176, 180, 0.15);
  }
  .recommend-show-report {
    border: 1px solid #65b0b4;
    color: #65b0b4;
    font-size: 14px;
    .report-icon {
      height: 20px;
      margin-bottom: -5px;
    }
  }
  .loading-img {
    height: 10px;
    margin-top: 16px;
    margin-left: 16px;
    // width: 120px;
  }
  .message-stop {
    font-size: 12px;
    color: #999999;
    margin-top: 5px;
    margin-left: 16px;
    cursor: pointer;
  }
  .message-stop:hover {
    color: #65b0b4;
  }
  .tongue-img {
    height: 300px;
    width: fit-content;
    background: #fff;
    padding: 8px;
    border-radius: 12px;
    display: flex;
    .tongue-single {
      display: flex;
      flex-direction: column;
      align-items: center;
      margin: 8px;
      img {
        height: 240px;
        width: auto;
        border-radius: 12px;
      }
      .tongue-single-text {
        margin: 8px;
      }
    }
  }
  .fade-in {
    animation: easein 0.5s;
  }
  @keyframes easein {
    from {
      opacity: 0;
      transform: translateY(20px);
    }
    to {
      opacity: 1;
      transform: translateY(0px);
    }
  }
</style>
